<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in columns"
      :key="item.label"
      :label="item.label"
      :prop="item.prop"
      :width="item.width"
      :min-width="item.minwidth"
      align="center"
    >
      <template #default="scope">
        <template v-if="item.type === 'onlineState'">
          <el-tag
            class="ml-2"
            :type="scope.row[item.prop] ? 'success' : 'danger'"
          >
            <i class="iconfont icon-status" style="width: 5px"></i>
            {{ scope.row[item.prop] ? '在线' : '离线' }}</el-tag
          >
        </template>
        <template v-else-if="item.type === 'timeFormat'"
          >{{ dayjs(scope.row[item.prop]).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-else-if="item.type === 'imgPersonId'">
          <img
            style="width: 40px; height: 40px"
            :src="scope.row[item.prop]"
            @click="clickImg(scope.row)"
          />
        </template>
        <template v-else-if="item.type === 'bigImg'">
          <img
            :src="scope.row[item.prop]"
            alt=""
            style="width: 80px; height: 60px"
            @click="clickBigImg(scope.row)"
          />
        </template>
        <template v-else-if="item.type === 'operator'">
          <el-button
            v-for="(btn, i) in props.extraOperateButtons"
            :key="i"
            type="primary"
            link
            @click="emits('click-skip', scope.row, i)"
            >{{ btn }}</el-button
          >
          <el-button
            v-if="isDetailText"
            type="primary"
            link
            @click="emits('ciick-detail', scope.row)"
            >{{ detailText }}</el-button
          >
          <el-button
            v-if="isEditText"
            type="primary"
            link
            @click="emits('click-edit', scope.row)"
            >{{ editText }}</el-button
          >
          <el-button
            v-if="isDelText"
            type="danger"
            link
            @click="emits('click-del', scope.row)"
            >{{ delText }}</el-button
          >
        </template>
        <template v-else>
          {{ scope.row[item.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
  <div class="paging">
    <el-pagination layout="prev, pager, next,total" :total="tableData.length" />
  </div>

  <imgView
    :is-visible="isVisibleImg"
    @close-img="closeImg"
    :img-url="imgUrl"
    :img-desc="imgDesc"
    @left-btn="leftBtn"
  ></imgView>
</template>

<script lang="ts" setup>
import imgView from '@/components/imgView.vue'

import dayjs from 'dayjs'
import type { IColumn, IGetDevice } from '@/type/home'
import { computed, ref } from 'vue'

const emits = defineEmits<{
  (e: 'ciick-detail', data: IGetDevice): void
  (e: 'click-edit', data: IGetDevice): void
  (e: 'click-del', data: IGetDevice): void
  (e: 'click-skip', data: IGetDevice, i: number): void
}>()
const props = withDefaults(
  defineProps<{
    columns: IColumn[]
    tableData: any[]
    operatorText?: string
    operatorWidth?: string
    detailText?: string
    isDetailText?: boolean
    editText?: string
    isEditText?: boolean
    delText?: string
    isDelText?: boolean
    extraOperateButtons?: string[]
  }>(),
  {
    operatorText: '操作',
    operatorWidth: '240',
    detailText: '查看',
    editText: '修改',
    delText: '删除',
    isDetailText: false,
    isEditText: false,
    isDelText: false
  }
)
const columns = computed<IColumn[]>(() =>
  props.detailText || props.editText || props.delText
    ? [
        ...props.columns,
        {
          prop: 'operator',
          label: props.operatorText,
          width: props.operatorWidth,
          type: 'operator'
        }
      ]
    : props.columns
)
// 是否显示图片
const isVisibleImg = ref(false)
const imgUrl = ref()
// 打开图片

const imgDesc = ref()
const clickImg = (data: IGetDevice) => {
  isVisibleImg.value = true
  console.log(data)
  imgUrl.value = data.personImg
  imgDesc.value = data
}

const clickBigImg = (data: IGetDevice) => {
  isVisibleImg.value = true
  imgUrl.value = data.bigImg
  imgDesc.value = data
}
// 关闭图片
const closeImg = () => {
  isVisibleImg.value = false
}
// 上一张图片
const leftBtn = () => {}
</script>

<style lang="scss" scoped>
.iconfont.icon-status {
  font-size: 12px;
}
.paging {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
